<template>
<div class="row-main">
    <router-link to="/road/packageCreate" >
      <el-button type="shenda" size="small" v-has="'packageCreatePermission'" icon="el-icon-plus">添加套餐组</el-button>
    </router-link>
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData"
              tooltip-effect="dark" class="row-main-table" v-loading.fullscreen="tableLoading"
              element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-table-column prop="name" label="套餐组名称" align="center"></el-table-column>
      <el-table-column prop="dictSetMealGroupTypeName" label="套餐大类类型" align="center"></el-table-column>
      <el-table-column prop="setMealCount" label="套餐个数" align="center"></el-table-column>
      <el-table-column prop="dictIsUsedName" label="是否启用" align="center"></el-table-column>
      <el-table-column prop="nickName" label="操作" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <div>
              <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-button class="operation" style="width: 100%;" @click="editBaseInfo(scope.row)" v-has="'editBaseInfo'">编辑基本信息</el-button>
              <el-button class="operation" style="width: 100%;" @click="editDownSetmeal(scope.row)" v-has="'editPackage'">编辑组内套餐</el-button><!--el-button.operation(-->
              <el-button class="operation" style="width: 100%;" @click="copySetmeal(scope.row)" v-has="'editPackage'">拷贝套餐组</el-button><!--el-button.operation(-->
              <el-button class="operation" style="width: 100%;" @click="deleteSetMealHead(scope.row.id)" v-has="'openOrClose'">删除</el-button>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
      <el-pagination
        class="row-main-pager"
        v-has="'roadListTable'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: right;margin-top: 20px"
        :total="total"
        background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {copySetmealHead, packageCatList, packageSave, setMealHeadDelete} from '@/api/getData'
  export default {
    name: "roadList",
    data(){
      return {
        form:{},
        maxPage: 1,
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        tableLoading: false,
        value: false,
        descs:['insertTime'],
        total: 0,
      }
    },
    created() {
      this.initData()
    },
    methods: {
      async copySetmeal(row){
        await copySetmealHead({id:row.id })
        this.$message.success("操作正在进行中！请勿重复操作！")
      },
      async initData() {
        const returnData = await packageCatList({
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })

        this.tableData = [];
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize); // 分页的最大页数
          this.tableData = returnData.data.records&&returnData.data.records.length>0?returnData.data.records:[];
          this.tableLoading = false;
          this.total = returnData.data.total;
        }
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
        this.initData()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initData()
      },

      //编辑组内基本信息
      editBaseInfo(obj){
        this.$router.push({path:'/road/packageCreate',query:{id:obj.id}})
      },
      //编辑组内套餐
      editDownSetmeal(obj){
        let arr = [ "BASE_MONTH", "BASE_DAY", "SUPERPOSITION_MONTH", "SUPERPOSITION_DAY", "LIMIT_SPEED", "LIMIT_SPEED_DAY", "LIMIT_SPEED_DAY_PLUS", "TONGYONG_HEAD"]
        let i = arr.indexOf(obj.dictSetMealGroupType);
        let t = i>5?'2':'1';
        this.$router.push({
          path: '/road/packageList',
          query: {
            headerId: obj.id, headName: obj.dictSetMealGroupType, headType: t
          }
        })
      },
      statusDeal(id,dictIsUsed){
        this.$confirm('您确定要执行此操作么, 是否继续?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(async () => {

          let sos = await packageSave({id,dictIsUsed});
          if(sos._result){
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.initData()
          }
        })
      },
      //删除套餐
      deleteSetMealHead(id){
          this.$confirm('您确定要执行此操作么, 是否继续?', '提示', {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning'
          }).then(async () => {
              let sos = await setMealHeadDelete({id});
              if(sos._result){
                  this.$message({
                      type: 'success',
                      message: '操作成功!'
                  });
                  this.initData()
              }
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '操作已取消'
              });
          });
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-popper[x-placement^=bottom] {
    margin-right: -31px;
    box-shadow: 0 0 10px #888888;
    margin-left: 6px;

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
  .el-popper[x-placement^=top] {
    box-shadow: 0px 0px 10px #888888;
    margin-left: 6px;
    margin-right: -31px;

    button {
      display: block;
    }

    .operation {
      border: 0;
      outline: none;
      display: block;
      text-align: center;
      margin: 0;
    }
  }
</style>
